<template>
  <router-link to="./setuser">&gt;&gt;返回列表</router-link>
  <!-- 用户搜索 -->
  <div class="usersearch">
    <div class="usele">
      <span>用户ID：{{id}}</span>
      <span>用户手机：{{phone}}</span>
    </div>
    <div class="useri">
      区域：
      <el-select size="small" v-model="value" clearable placeholder="全部">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :filterable='true'
        />
      </el-select>渠道：
      <el-select size="small" v-model="channelv" clearable placeholder="全部">
        <el-option
          v-for="item in channel"
          :key="item.channelv"
          :label="item.label"
          :value="item.channelv"
        />
      </el-select>
      <button @click="search">查询</button>
    </div>
  </div>
  <!-- 用户渲染 -->
  <div>
    <el-table empty-text='此用户没购买优惠券' :data="ser.length>0?ser.slice((currentPage-1)*pageSize,currentPage*pageSize):tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
      <el-table-column align="center" prop="coupon_type" label="区域" />
      <el-table-column align="center" prop="coupon_name" label="名称:" />
      <el-table-column align="center" prop="coupon_startDateTime" label="卡卷获得时间" />
      <el-table-column align="center" prop="coupon_endDateTime" label="卡卷过期时间:" />
      <el-table-column align="center" prop="coupon_state" label="卡卷状态:">
        <template v-slot="scope">
          <span :style="{color:scope.row.coupon_state==1?'#70B603':'red'}">{{scope.row.coupon_state==1?'可用':'过期' }}</span>
      </template>
      </el-table-column>
      <el-table-column align="center" prop="coupon_money" label="支付金额:" />
    </el-table>
  </div>
    <!-- 分页 -->
  <div class="page">
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[ 2, 5, 6]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ser.length ||count"
      />
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import axios from "axios";
const count=ref('');
onMounted(() => {
  axios({
    url: "/getCouponData",
    params: { user_id: route.query.user_id }
  })
    .then(res => {
      tableData.value=res.data.data;
      count.value=res.data.data.length;
    })
    .catch(error => console.log(error));
});
const pageSize = ref(2);
const currentPage = ref(1);
const value = ref("");
const nutext=ref('');
const options = [
  {
    value: "单人区",
    label: "单人区"
  },
  
  {
    value: "双人区",
    label: "双人区"
  }
];
const channelv = ref("");
const channel = [
  {
    channelv: "微信",
    label: "微信"
  },
  {
    channelv: "余额",
    label: "余额"
  },
  {
    channelv: "兑换码",
    label: "兑换码"
  },
  {
    channelv: "时长兑换",
    label: "时长兑换"
  }
];
const tableData = ref([
  {
    usid: "1",
    usname: "张三",
    usphone: "15896735689",
    date: "2016-05-03",
    balance: "20",
    duration: "18小时",
    Exchange: "20小时"
  },
  {
    usid: "2",
    usname: "张过后",
    usphone: "15896735689",
    date: "2026-05-03",
    balance: "205",
    duration: "184小时",
    Exchange: "23小时"
  },
  {
    usid: "3",
    usname: "张风格",
    usphone: "15896735689",
    date: "2018-05-03",
    balance: "240",
    duration: "188小时",
    Exchange: "201小时"
  },
  {
    usid: "4",
    usname: "张第三方",
    usphone: "15896735689",
    date: "2016-08-03",
    balance: "20",
    duration: "18小时",
    Exchange: "24小时"
  }
]);
// 搜索
  let ser=ref([]);
const search = () => {
  console.log(value.value);

  ser.value=tableData.value.filter(item=>{
    return item.coupon_type==value.value || item.coupon_name==channelv.value
  })
  console.log(ser);
};
const route = useRoute();
const id = route.query.user_id;
const phone = route.query.user_iphone;
</script>

<style lang='scss' scoped>
a {
  text-decoration: none;
  font-size: 12px;
  color: #51c5f8;
}
.usersearch {
  height: 50px;
  line-height: 50px;
  display: flex;
  background-color: #d7d7d7;
  padding: 0 20px;
  margin-top: 10px;
  .usele,
  .useri {
    flex: 1;
    span {
      display: inline-block;
      width: 200px;
    }
    button {
      width: 80px;
      height: 30px;
      margin-left: 20px;
      background-color: #555555;
      color: #fff;
      border: 0 solid #000;
      cursor: pointer;
    }
  }
}
.nutext{
  font-size: 12px;
  text-align: center;
}
.page {
  .el-pagination {
    justify-content: center;
  }
}
</style>